<template>
	<view class="cate">
		<view class="cate-list">
			<view class="item" :class="{active:item.id==selectedId}" v-for="(item,index) in cateList" :key="index"
			@tap="selectCate(item.id)">
				{{item.name}}
			</view>
		</view>	
		<!-- 商品列表 -->
		<scroll-view class="cate-goods" scroll-y>
			<view class="item2" v-for="(item,index) in goodsList" :key="index">
				<view class="pic">
					<image :src="item.goods_big_logo" mode=""></image>
				</view>
				<view class="msg">
					<view class="name">
						{{item.name}}
					</view>
					<view class="price">
						￥{{item.price}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'

onLoad(()=>{
	getCateList()
	getCateGoodsList(38)
})
let selectedId=ref(0)

function selectCate(id){
	selectedId.value=id
	// 
	getCateGoodsList(id)
}
// 商品分类
let cateList=ref([])
async function getCateList(){
	 let res=await uni.$post("/categoryListLevel",{
		level:1
	})
	if(res.code==200){
		cateList.value=res.result;
		cateList.value.unshift({
			// 在首位添加全部类别
			id:0,
			name:'全部'
		})
	}
	// console.log(cateList.value)
}
// 商品列表
const goodsList=ref([])
// 默认显示全部商品
async function getCateGoodsList(cid){
	let res;
	if(cid==0) //选中的是全部商品
	{
		res=await uni.$post("/goodsListPage",
			{    
			    "page":1,
			    "number":20
			})
			if(res.code==200){
				goodsList.value=res.goodsList.map(item=>{
					item.goods_big_logo= uni.$base_url +item.goods_big_logo
					return item;
				})
			}
	}else{ //选中的一个二级类别
		res =await uni.$post("/goodsListPage_catTwo",
		{
			"cat_two_id":cid,
			    "page":1,
			    "number":10
		})
		if(res.code==200){
			goodsList.value = res.goodsList.map(item=>{
					item.goods_big_logo= uni.$base_url +item.goods_big_logo
					return item;
					})
		}
	
	console.log(goodsList.value)
}
// let res=uni.getWindowInfo()
// console.log(res)
</script>

<style>
	.cate{
		display: flex;
	}
	
.cate>.cate-list{
	width: 180rpx;
	border: 1px solid red;
	height: calc(100vh - 100px);
	/* #ifdef MP-WEIXIN */
	height:100vh;
	/* #endif */
}
.cate>.cate-list>.item{
	font-size: 26rpx;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
}
.cate>.cate-list>.active{
	background-color: #ff6700;
	color: #fff;
}
.cate>.cate-goods{
	width: 570rpx;
	height: calc(100vh - 100px);
	/* #ifdef MP-WEIXIN */
	height:100vh;
	/* #endif */
}
.item2{
	width: 525rpx;
	border: 1px solid #ccc;
	padding: 10rpx;
	margin: 10rpx;
	display: flex;
}
.item2>.pic{
	width: 150rpx;
	height: 150rpx;
	border: 1px solid #ccc;
}
.item2>.pic>image{
	width: 100%;
	height: 100%;
}
.item2>.msg{
	width: 360rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.item2>.msg>.name{
	overflow: hidden;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	font-size: 14px;
	color: #666;
}
.item2>.msg>.price{
	color: #ff0000;
}
</style>
